<template>
  <div class="relative_height company_wrap">
    <Navbar :isBack="true" />
    <div class="top">
      <div class="pageWidth top_cont u-flex u-row-between u-col-bottom">
        <div class="u-flex-col u-row-center" style="height: 100%">
          <div class="top_tit">商品管理</div>
          <div class="top_eng">
            提供全面、高效的商品管理服务。通过详细展示商品信息、智能分类搜索、<br />
            实时库存管理及精准数据分析助力您轻松拓展海外市场，提升销售额。
          </div>
        </div>
        <img src="../../image/mine/comIcon.png" class="top_img" />
      </div>
    </div>
    <div class="shop pageWidth">
      <div class="u-flex u-row-between">
        <div class="create_btn u-flex u-row-center hand" @click="jumpPage">
          <img src="../../image/mine/whitePlus.png" />
          创建商品
        </div>
        <div class="u-flex">
          <div class="bor_btn hand" @click="jumpPage">编辑</div>
          <div class="bor_btn m_l_17 hand" @click="jumpPage">删除</div>
        </div>
      </div>

      <div class="u-flex u-flex-wrap">
        <div class="shop_item hand" v-for="(item, index) in shopList" :key="index">
          <div class="item_img">
            <img :src="item.goods_image" />
          </div>
          <div class="item_cont webkit-line-clamp-one">
            {{ item.goods_name }}
          </div>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <Pagination
      v-model:currentPage="currentPage"
      :pageSize="pageSize"
      :total="total"
      :maxVisible="5"
      v-if="total > pageSize"
      @page-change="handlePageChange"
      class="page_box"
    />
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { ref, onMounted, watch, computed, getCurrentInstance, reactive } from 'vue'
  import { useRouter, useRoute } from 'vue-router'

  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const store = useStore()
  const router = useRouter()

  const shopList = ref([])
  const currentPage = ref(localStorage.getItem('currentPage') || 1)
  const pageSize = ref(18)
  const total = ref(0)

  onMounted(() => {
    goodsFn()
  })

  // 商品列表
  const goodsFn = () => {
    store
      .dispatch('home/comGoodsApi', {
        page: currentPage.value,
        per_page: pageSize.value,
      })
      .then(res => {
        if (res.status == 200) {
          shopList.value = res.data.list.data
          total.value = res.data.list.total
        }
      })
  }

  // 分页变化处理
  const handlePageChange = page => {
    currentPage.value = page

    localStorage.setItem('currentPage', currentPage.value)
    goodsFn() // 商品列表
  }

  // 跳页
  const jumpPage = () => {
    window.open('https://kj.heizixun.com/store/#/passport/login')
  }
</script>

<style scoped lang="less">
  // 兼容
  @media screen and (max-width: 1920px) {
    .company_wrap {
      // 头图
      .top {
        .top_cont {
          .top_tit {
            font-size: 34px !important;
            margin-bottom: 25px !important;
          }

          .top_eng {
            font-size: 15px !important;
          }
          .top_img {
            width: 500px !important;
          }
        }
      }
      .shop {
        .create_btn {
          width: 115px !important;
          height: 39px !important;
          border-radius: 5px !important;
          font-size: 14px !important;
          margin: 25px 0 !important;

          img {
            width: 13px !important;
            margin-right: 6px !important;
          }
        }

        .bor_btn {
          width: 75px !important;
          height: 32px !important;
          font-size: 14px !important;
        }

        .m_l_17 {
          margin-left: 15px !important;
        }
        .shop_item {
          margin-bottom: 11px !important;

          .item_cont {
            padding: 11px 15px !important;
            font-size: 13px !important;
          }
        }
      }

      .page_box {
        padding-bottom: 35px !important;
      }
    }
  }

  @media screen and (max-width: 1700px) {
    .company_wrap {
      // 头图
      .top {
        .top_cont {
          .top_tit {
            font-size: 30px !important;
            margin-bottom: 22px !important;
          }

          .top_eng {
            font-size: 14px !important;
            line-height: 24px !important;
          }
          .top_img {
            width: 450px !important;
          }
        }
      }

      .shop {
        .create_btn {
          width: 105px !important;
          height: 35px !important;
          border-radius: 4px !important;
          font-size: 13px !important;
          margin: 20px 0 !important;

          img {
            width: 12px !important;
            margin-right: 5px !important;
          }
        }

        .bor_btn {
          width: 70px !important;
          height: 29px !important;
          font-size: 13px !important;
        }

        .m_l_17 {
          margin-left: 13px !important;
        }
        .shop_item {
          margin-bottom: 10px !important;

          .item_cont {
            padding: 10px 14px !important;
            font-size: 12px !important;
          }
        }
      }

      .page_box {
        padding-bottom: 32px !important;
      }
    }
  }

  @media screen and (max-width: 1500px) {
    .company_wrap {
      // 头图
      .top {
        .top_cont {
          .top_tit {
            font-size: 26px !important;
            margin-bottom: 20px !important;
          }

          .top_eng {
            font-size: 12px !important;
            line-height: 20px !important;
          }
          .top_img {
            width: 380px !important;
          }
        }
      }

      .shop {
        .create_btn {
          width: 95px !important;
          height: 31px !important;
          font-size: 11px !important;
          margin: 17px 0 !important;

          img {
            width: 10px !important;
            margin-right: 4px !important;
          }
        }

        .bor_btn {
          width: 65px !important;
          height: 26px !important;
          font-size: 12px !important;
        }

        .m_l_17 {
          margin-left: 13px !important;
        }
        .shop_item {
          margin-bottom: 10px !important;

          .item_cont {
            padding: 10px 12px !important;
            font-size: 12px !important;
          }
        }
      }

      .page_box {
        padding-bottom: 30px !important;
      }
    }
  }

  .company_wrap {
    // 头图
    .top {
      width: 100%;
      aspect-ratio: 16/2.5;
      background: url('../../image/mine/comBg.png') no-repeat;
      background-size: 100% 100%;

      .top_cont {
        color: #fff;
        height: 100%;

        .top_tit {
          font-size: 38px;
          margin-bottom: 30px;
        }

        .top_eng {
          font-size: 16px;
          line-height: 30px;
        }

        .top_img {
          // width: 615px;
          height: 80%;
          width: auto;
        }
      }
    }

    .shop {
      .create_btn {
        width: 131px;
        height: 43px;
        border-radius: 6px;
        font-size: 16px;
        color: #fff;
        margin: 30px 0;
        background: #5463ff;

        img {
          width: 14px;
          height: auto;
          margin-right: 8px;
        }
      }

      .bor_btn {
        width: 84px;
        height: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #3d3d3d;
        font-size: 16px;
        border-radius: 3px;
        border: 1px solid #d1d1d1;
      }
      .m_l_17 {
        margin-left: 17px;
      }
      .shop_item {
        width: 15.83%;
        margin-right: 1%;
        border-radius: 14px;
        box-sizing: border-box;
        margin-bottom: 12px;
        border: 1px solid #eee;

        &:nth-child(6n) {
          margin-right: 0;
        }

        .item_img {
          width: 100%;
          aspect-ratio: 1/1;
          border-radius: 14px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .item_cont {
          padding: 13px 17px;
          font-size: 14px;
          color: #3d3d3d;
          font-weight: bold;
        }
      }

      .shop_item:hover {
        box-shadow: 0px 1px 12px 0px rgba(84, 99, 255, 0.3);
      }
    }

    .page_box {
      padding-bottom: 40px;
    }
  }
</style>
